<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订花乐</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        i {
            font-style: italic;
        }
        .header-bottom .header-search {
            padding-top: 44px;
        }
    </style>
    <link rel="stylesheet" href="css/react.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<herder id="miao">
    <div class="header">
        <div class="header-top" style="position:absolute;width: 100%;">
            <div class="container clearfix" style="width: 1168px !important;">
                <div class="con-left fl">
                    <p class="fl text-color-9 align-center">嗨，欢迎来订花乐！</p>
                    <a href="" class="fr align-center a-code wxewm">
                        <i class="iconfont icon-weixin text-color-logo"></i>
                        <span class="text-color-9">关注微信</span>
                    </a>
                </div>
                <div class="con-right fr">

                    <!--登录-->
                    <a href="" class="text-color-9 fl align-center login-btn">你好，请登录</a>
                    <!--注册-->
                    <span class="fl line align-center"></span>
                    <a href="" class="fl text-color-logo align-center">免费注册</a>
                    <!--购物车-->
                    <span class="fl line align-center"></span>
                    <a href="" class="fl align-center">
                        <i class="iconfont icon-gouwuche text-color-logo"></i>
                        <span class="text-color-9">购物车</span>
                        <span class="text-color-logo">(0)</span>
                    </a>
                    <span class="fl line align-center"></span>
                </div>
            </div>
        </div>
        <div class="header-bottom">
            <div class="container header-search clearfix" style="width: 1168px !important;">
                <div class="logo fl">
                    <div class="logo-img align-center">
                        <a href="/">
                            <img src="./img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="phone-search fr align-center">
                    <p class="fl phone-search-text">
                        <i class="iconfont icon-dianhua"></i>
                        <span class="text-color-9">400-060-1520</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</herder>
<div class="contentMain" id="go">
    <!--账号登录-->
    <div id="login" v-if="!isShow">
        <div class="registration-form" id="tologin">
            <div class="registration-formtitlea">
                <div class="usernamelogin activedengluclass">账号登录</div>
            </div>
            <div class="registration-formconta">
                <div>
                    <label>
                        <i class="iconfont icon-wode1"></i>
                    </label>

                    <!--账号-->
                    <input type="text" id="accountTel" placeholder="请输入账号">

                    <!--检测-->
                    <text class="redFontmessage">账号判断</text>
                </div>
                <div>
                    <label>
                        <i class="iconfont icon-mima"></i>
                    </label>

                    <!--密码-->
                    <input type="password" id="accountPass" placeholder="请输入密码">

                    <!--检测-->
                    <text class="redFontmessage">密码判断</text>
                </div>

                <!--设置一个点击事件来登录用户-->
                <div class="resgisti-button cursorpointer">登录</div>
            </div>
            <div class="registration-formbottom">
                <div class="redFont dnegluclass cursorpointer" @click="login()">
                    注册账号
                    <div class="iconfont icon-xialayou"></div>
                </div>
            </div>
        </div>
    </div>
    <!--注册页面-->
    <div class="registration-form" id="register" v-if="isShow">
        <div class="registration-formtitle">
            <div>账号注册</div>
        </div>
        <div class="registration-formcont">
            <div>
                <label><i class="iconfont icon-wode1"></i></label>
                <input id="regisMobile" type="text" name="username" placeholder="输入账号" required="required"  @blur="toname()">
                <span class="redFontmessage">{{inname}}</span>
            </div>
            <div>
                <label><i class="iconfont icon-mima"></i></label>
                <input id="regisPass" type="password" name="password" placeholder="输入密码" required="required" @blur="topass1()">
                <span class="redFontmessage">{{inpass}}</span>
            </div>
            <div>
                <label><i class="iconfont icon-mima"></i></label>
                <input id="regisrePass" type="password" name="password2" placeholder="确认密码" required="required" @blur="topass2()">
                <span class="redFontmessage">{{inpass2}}</span>
            </div>
            <div>
                <label><i class="iconfont icon-wode1"></i></label>
                <input  type="text" name="nickname" placeholder="设置昵称 2-20字" pattern="^.{2,20}$" required="required" @blur="tonick()">
                <span class="redFontmessage">{{innick}}</span>
            </div>
            <div class="resgisti-button" @click="reg()">注册</div>
        </div>
        <div class="registration-formbottom">
            <div class="redFont dnegluclass cursorpointer" @click="logout()">
                登录账号
                <div class="iconfont icon-xialayou"></div>
            </div>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footer-top">
            <div class="container clearfix footer-top-all">
                <div class="logo-img fl align-center">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="nav-module fl">
                    <div class="footer-module fl align-center">
                        <p>热门导航</p>
                        <div class="footer-nav">
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">网站首页</a>
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">爱情鲜花</a>
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">全部商品</a>
                        </div>
                    </div>
                    <div class="footer-module footer-module1 fl align-center">
                        <p>客服服务</p>
                        <div>
                            <div class="footer-nav fl">
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">关于我们</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">服务声明</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">订花流程</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">支付方式</a>
                            </div>
                            <div class="footer-nav fr">
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">配送说明</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">售后服务</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">隐私条款</a>
                                <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">联系我们</a>
                            </div>
                        </div>
                    </div>
                    <div class="footer-module fl align-center">
                        <p>联系我们</p>
                        <div class="footer-nav">
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">意见反馈</a>
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">工作时间：07:00-23:00</a>
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">7*24小时在线订购</a>
                            <a href="#" onclick="return false;" target="_blank" class="footer-nav-item">全国热线：400-060-1520</a>
                        </div>
                    </div>
                </div>
                <div class="erweima fr align-center">
                    <div class="erweima-img">
                        <img src="./img/QR.png" alt="">
                        <p class="text-color-9">扫码关注</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="js/reg.js"></script>

<script>
    let v = new Vue({
        el:"#go",
        data:{
            isShow:false
        },
        methods:{
            login:function () {
                v.isShow=true;
            },
            logout:function () {
                v.isShow=false;
            }
        }
    })
</script>
</body>
</html>